<template>
  <div id="app">
    <Header />
    <Todo class="w1200 self-center" />

    <div class="mark-mode">
      {{isMobile ? 'Mobile' : 'PC'}} Mode
    </div>
    <div class="mask"></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Mutation, State } from 'vuex-class';
import Header from './components/header/Header.vue';
import Todo from './components/Todo.vue';

@Component({
  components: {
    Header,
    Todo
  },
})
export default class App extends Vue {
  //从store中注入该属性和value
  @State
  isMobile!: boolean;

  // 等于mpaMutation
  @Mutation
  private updateIsMobile!: (value: boolean) => void;

  // 等于vue2的methods
  checkIsMobile() {
    window.addEventListener('resize', () => {
      // mutation
      this.updateIsMobile(window.innerWidth < 768);
      // this.$store.commit('updateIsMobile', window.innerWidth < 768);
    })
  }


  // 生命周期函数
  beforeCreate() {
    console.log('lifycycle-> beforeCreate');
  }
  created() {
    console.log('lifycycle-> created');
    this.checkIsMobile();
  }
  beforeMount() {
    console.log('lifycycle-> beforeMount');
  }
  mounted() {
    console.log('lifycycle-> mounted');
  }
  beforeUpdate() {
    console.log('lifycycle-> beforeUpdate');
  }
  updated() {
    console.log('lifycycle-> updated');
  }
  beforeDestory() {
    console.log('lifycycle-> beforeDestory');
  }
  destroy() {
    console.log('lifycycle-> destroy');
  }

}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #fff;
  z-index: 1;
}

.mark-mode {
  position: fixed;
  
  text-align: center;
  /* width: 50vw; */
  padding: 10px 50px;
  top: 15px;
  right: -50px;
  background-color: rgba(86, 86, 250, 0.5);
  transform: rotate(45deg);
  @media screen and (max-width: 768px) {
    top: 5vw;
    right: -16vw;
  }
}

.mask {
  position: fixed;
  z-index: -1;
  background: rgba(0, 0, 0, .3);
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}

body {
  background-image: url('./assets/bg3.jpg');
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  @media screen and (max-width: 768px) {
    background-image: url('./assets/m-bg3.jpg');
  }
}

.w1200 {
  max-width: 1200px;
  /* border: 1px solid red; */
  @media screen and (max-width: 768px) {
    width: 100%;
    max-width: 100%;
  }
}

.self-center {
  margin: 0 auto;
}
</style>
